<div class="page-wrapper d-flex flex-column pt-4 w-100" ng-init="getSingle()">
    <form ng-class="{'submitted': submitted}" ng-submit="save()" ng-if="viewmodel">
        <div class="container card page-header page-header-feature d-print-none mb-3"
            style="background-image: url('{{viewmodel.imageUrl}}'); ">
            <div class="page-title-wrapper row align-items-center pt-3">
                <div ng-if="viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Updating...
                    </div>
                    <h2 class="page-title text-white">
                        {{viewmodel.title}}
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
                <div ng-if="!viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Create
                    </div>
                    <h2 ng-if="!viewmodel.title" class="page-title text-white">
                        New Post
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
            </div>
            <span class="mask bg-gradient-primary" style="opacity: 0.5;"></span>
            <div class="page-thumbnail" style="background-image: url({{viewmodel.thumbnailUrl}});    ">
            </div>
        </div>
        <div class="page-body d-flex flex-row-reverse">
            <aside class="bd-sidebar sub-sidebar">
                <nav class="bd-links p-3" aria-label="Sub-section navigation">
                    <div class="card">
                        <actions on-clear-cache="clearCache()" preview-url="viewmodel.detailsUrl"
                            back-url="referrerUrl">
                        </actions>

                        <div class="mb-3"></div>
                        <div class="accordion accordion-flush shadow-none" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseOne" aria-expanded="false"
                                        aria-controls="flush-collapseOne">
                                        Basic informations
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <div class="mb-3">
                                            <statuses status="viewmodel.status"></statuses>
                                        </div>
                                        <div class="mb-3" ng-if="viewmodel.status == 'Schedule'">
                                            <label class="form-label">Published Date Time</label>
                                            <mix-date-editor utc-date="viewmodel.publishedDateTime">
                                            </mix-date-editor>
                                        </div>
                                        <div class="mb-3" ng-if="viewmodel">
                                            <label class=" form-label">Created Date Time</label>
                                            <mix-date-editor is-readonly="'false'" utc-date="viewmodel.createdDateTime">
                                            </mix-date-editor>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Author</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Contact"></i></span>
                                                <input ng-model="viewmodel.createdBy" class="form-control"
                                                    readonly="readonly" />
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Post type [
                                                <a href="/portal/mix-database-data/create?mixDatabaseId=9&mixDatabaseName=post_type&mixDatabaseTitle=Post%20Type&dataId=default"
                                                    title="Add new post type to the list">
                                                    +
                                                </a>
                                                ]</label>
                                            <select ng-init="loadPostTypes()" class="form-select"
                                                ng-options="item as item.title for item in postTypes track by item.id"
                                                ng-change="onSelectType()" ng-model="postType"></select>
                                        </div>

                                        <div class="mb-3 mb-0">
                                            <label class="form-label">Template</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Layout"></i></span>
                                                <select class="form-select"
                                                    ng-options="item as item.fileName for item in viewmodel.templates track by item.id"
                                                    ng-model="viewmodel.view"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                        aria-controls="flush-collapseTwo">
                                        Languages
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <cultures is-clone="viewmodel.isClone" data="viewmodel.cultures"></cultures>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseThree" aria-expanded="false"
                                        aria-controls="flush-collapseThree">
                                        Images
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <pills ng-if="viewmodel" select-callback="selectPane(pane)"
                                            class="mb-4 nav-fill">
                                            <pill header="Feature">
                                                <custom-image header="'Feature Upload'" type="'Posts'"
                                                    folder="viewmodel.seoName" header="viewmodel.title"
                                                    description="viewmodel.excerpt" src-url="viewmodel.imageUrl"
                                                    src="viewmodel.image" auto="'true'"></custom-image>
                                            </pill>
                                            <pill header="Thumbnail">
                                                <custom-image header="'Thumbnail Upload'" type="'Posts'"
                                                    folder="viewmodel.seoName" title="viewmodel.title"
                                                    description="viewmodel.excerpt" src-url="viewmodel.thumbnailUrl"
                                                    src="viewmodel.thumbnail" auto="'true'">
                                                </custom-image>
                                            </pill>
                                        </pills>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading-urlalias">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapse-urlalias" aria-expanded="false"
                                        aria-controls="flush-collapse-urlalias">
                                        URL alias
                                    </button>
                                </h2>
                                <div id="flush-collapse-urlalias" class="accordion-collapse collapse"
                                    aria-labelledby="flush-heading-urlalias" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <!-- TODO: Hoang to check the add slugs button not working -->

                                        <button class="btn btn-link text-primary btn-sm float-end py-0" type="button"
                                            ng-click="addAlias()">
                                            <span class="fas fa-plus text-primary"></span> Add slugs
                                        </button>
                                        <div id="slug-tab" class="card-body collapse-x">
                                            <url-alias ng-repeat="alias in viewmodel.urlAliases" ng-if="alias"
                                                index="$index" url-alias="alias"
                                                remove-callback="removeAliasCallback(index)"></url-alias>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading-categories">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapse-categories" aria-expanded="false"
                                        aria-controls="flush-collapse-categories">
                                        Categories
                                    </button>
                                </h2>
                                <div id="flush-collapse-categories" class="accordion-collapse collapse"
                                    aria-labelledby="flush-heading-categories" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <modal-nav-metas ng-if="viewmodel.sysCategories" header="'Categories'"
                                            parent-id="viewmodel.id" is-open="'show'" parent-type="'Post'" type="''"
                                            mix-database-name="'sys_category'" column-display="'title'"
                                            selected-list="viewmodel.sysCategories"></modal-nav-metas>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading-tags">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapse-tags" aria-expanded="false"
                                        aria-controls="flush-collapse-tags">
                                        Tags
                                    </button>
                                </h2>
                                <div id="flush-collapse-tags" class="accordion-collapse collapse"
                                    aria-labelledby="flush-heading-tags" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <modal-nav-metas ng-if="viewmodel.sysTags" header="'Tags'"
                                            parent-id="viewmodel.id" is-open="'show'" parent-type="'Post'" type="''"
                                            mix-database-name="'sys_tag'" column-display="'title'"
                                            selected-list="viewmodel.sysTags"></modal-nav-metas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5"></div>
                    </div>
                </nav>
            </aside>

            <!-- ----------------------------------------------------------- -->

            <div class="content-body py-3 pe-3">
                <section class="">

                    <tabs-v class="mb-3" ng-if="viewmodel">
                        <pane-v icon="fas fa-feather-alt" header="Content">
                            <post-content model="viewmodel" additional-data="additionalData"></post-content>
                        </pane-v>
                        <pane-v icon="fas fa-search" header="SEO">
                            <post-seo post="viewmodel"></post-seo>
                        </pane-v>
                        <pane-v icon="fas fa-list" header="Related">
                            <div class="card card-body">
                                <related-navs request="request" source-id="viewmodel.id" categories="categories"
                                    post-types="postTypes" culture="viewmodel.specificulture" prefix="'post'"
                                    navs="viewmodel.postNavs" data="relatedData" load-data="getListRelated(pageIndex)">
                                </related-navs>
                            </div>

                            <!-- <related-navs request="request" source-id="viewmodel.id" culture="viewmodel.specificulture" prefix="'post'"
                                navs="viewmodel.postNavs" data="relatedData" load-data="getListRelated(pageIndex)">
                            </related-navs> -->
                            <!-- <related-navs request="$ctrl.request" source-id="$ctrl.model.id" culture="$ctrl.model.specificulture" prefix="'post'"
                                navs="$ctrl.model.postNavs" data="$ctrl.relatedData" load-data="$ctrl.getListRelated(pageIndex)">
                            </related-navs> -->
                        </pane-v>
                        <pane-v icon="fas fa-cubes" header="Parents">
                            <post-parents post="viewmodel"></post-parents>
                        </pane-v>
                        <pane-v icon="fas fa-cog" header="" class="ms-auto" ng-if="isAdmin">
                            <post-advanced model="viewmodel" additional-data="additionalData"></post-advanced>
                        </pane-v>
                    </tabs-v>
                </section>
            </div>
        </div>
    </form>
</div>